@media screen and (max-width:500px) {
  #comments {
    .comment {
      flex-direction: column;
      align-items: flex-start;

      // .avatar {
      //   flex: 0 0 100%;
      // }

      .details {
        flex: 1 1 100%;
        align-self: stretch;
      }
    }
  }
}


#comments {
  width: 100%;
  border-radius: 10px;
  min-height: 600px;
  padding: 15px;
  font-weight: bold;
  position: relative;
  padding-bottom: 60px;

  .comment {
    display: flex;
    padding: 0.5em 0;
    margin-bottom: 1.5rem;

    // 头像
    .avatar {
      margin-right: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;

      img {
        border-radius: 50%;
        overflow: hidden;
        object-fit: fill;
        min-width: 50px;
        min-height: 50px;
        width: 50px;
        height: 50px;
        margin-bottom: 15px;

      }
    }

    // 评论体
    .details {
      flex: 1 1 80%;

      .head {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        flex-wrap: wrap;

        .name {
          font-weight: bold;
          margin: 0;
          margin-right: 15px;
          font-size: 14px;
          color: #51c2a4;
          transition: .5s;

          @media (any-hover:hover) {
            &:hover {
              cursor: pointer;
              transition: .5s;
              transform: translateZ(0)scale(1.15);
            }
          }

        }

        .date {
          font-size: 12px;
          margin-right: 15px;
        }

        .title {
          font-weight: lighter;
          padding: 2.5px 10px;
          font-size: 12px;
          border-radius: 3px;
          color: #fff;
          background-color: #23303f;
          transition: all .5s;
          letter-spacing: 2.5px;

        }

        .reply {
          margin-left: auto;
          font-weight: bold;
          font-size: 12px;
          transition: all .5s;

          &:hover {
            color: #333;
            cursor: pointer;
            transition: all .5s;
          }
        }

      }


      .agent {
        display: flex;
        font-size: 12px;
        align-items: center;
        margin-bottom: 10px;

        .dot {
          line-height: 20px;
          font-size: 20px;
          font-weight: bold;
          margin: 0 5px;
        }

        .system,
        .browser {
          transition: .7s;
          display: flex;
          align-items: center;

          &:hover {
            transition: .7s;
            color: #757d8a;
          }

          span {
            margin: 1.5px;
          }

          .icon {
            height: 20px;
            width: 20px;
            object-fit: fill;
            margin-right: 2.5px;
          }
        }
      }


      .content {
        border-radius: 5px;
        margin-bottom: 10px;
        padding-bottom: 15px;
        font-size: 14px;
        text-align: left;

        .at {
          display: inline-block;
          font-weight: bold;
          margin: 0;
          margin-right: 15px;
          font-size: 14px;
          color: #51c2a4;
          transition: .5s;

          @media (any-hover:hover) {
            &:hover {
              cursor: pointer;
              transition: .5s;
              transform: translateZ(0)scale(1.15);
            }
          }

        }

        .secret {
          padding: 15px;
          text-align: center;
          background: repeating-linear-gradient(145deg, #f2f2f2, #f2f2f2 15px, #fff 0, #fff 30px);
        }
      }

      .extra {
        // padding-bottom: 15px;
        display: flex;
        align-items: center;
        padding-bottom: 15px;

        .icon {
          margin-right: 15px;
          color: #0009;
          transition: .3s;

          &:hover {
            cursor: pointer;
            color: #000;
            transition: .3s;
          }

          .iconfont {
            margin-right: 5px;
          }

          .number {
            font-size: 12px;
          }
        }
      }
    }

    // 子评论
    .children {
      display: flex;
      flex-direction: column;

      .comment {
        padding: 15px;
        margin: 0;
        margin-bottom: 15px;
      }
    }
  }

  .ant-pagination {
    width: 100%;
    // position: absolute;
    // bottom: 0;
    // left: 50%;
    // transform: translateX(-50%);
    text-align: center;
  }

}